<template>
	<view>
		<custom-nav-sq-xcx :isBack="true" currBg="usuallyBg" :needConBlock="true">
			<block slot="content">咨询师预约</block>
		</custom-nav-sq-xcx>
		<view class="sqConBlock"></view>
		<view class="sqConWrap">
			<mod-tit modTit="选择咨询人">
				<view class="addZxr" @tap="goAddZxr">
					<text class="iconfont icon-jia"></text>
					<text>添加咨询人</text>
				</view>
			</mod-tit>
			<view class="modCon zxUserInfo hasFlex">
				<!-- <view class="noZxr" @tap="goAddZxr">请添加咨询人</view> -->
				<view class="zxrList"
					:class="[currIndex == index ? 'active' : '']"
					v-for="(item,index) in zxrList"
					:key="index"
					@tap="switchZxr(index,item)"
				>
					<view class="zxsName">{{item.zxrName}}</view>
					<view class="sex">{{item.zxrMobile}}</view>
				</view>
			</view>
			<mod-tit modTit="咨询方式" smTit="建议选择面对面咨询或视频咨询,咨询效果更佳"></mod-tit>
			<zx-type :zxTypeArr="zxTypeArr" :typeIndex="typeIndex" @selectYyType="selectYyType"></zx-type>
			<!-- 面对面预约机构信息 -->
			<view class="ogzInfo" v-if="offLineFlag">
				<view class="ogzItem">
					<view class="ogzName spaceBet">
						<text>濮阳市心理咨询师协会</text>
						<view class="goNavigation">
							<text class="iconfont icon-daohang"></text>
							<text>0.56km</text>
						</view>
					</view>
					<view class="ogzAdd"><text class="iconfont icon-weizhi"></text><text>发大水了看法防静电塑料开发建设反倒是交流看法的时间反倒是减肥</text></view>
					<view class="ogzTel" @tap="makePhoneCall(uoList[0].lxTel)"><text class="iconfont icon-dianhua1"></text><text>039352532563</text></view>
				</view>
			</view>
			<mod-tit modTit="咨询内容" smTit="可多选(最多选四项)"></mod-tit>
			<view class="modCon hasBg">
				<view class="qkList">
					<view class="qkItem"
						:class="[item.selFlag ? 'active' : '']"
						v-for="(item,index) in perInfoArr"
						:key="index"
						@tap="selectCurrPos(index,item.name)"
					>
						<view class="multiView"><view class="iconfont icon-duihao"></view></view>
						<view class="qkName">{{item.name}}</view>
					</view>
				</view>
			</view>
			<mod-tit modTit="可预约时间"></mod-tit>
			<zx-time
				:currDateIndex="currDateIndex"
				:currWeek="currWeek" 
				:dateList="dateList"
			></zx-time>
		</view>
		<view class="agree hasFlex" @tap="shouldAgree">
			<view class="check" :class="[isAgreeFlag ? 'active' : '']">
				<view class="iconfont icon-duihao"></view>
			</view>
			<view class="agreeTxt">我已知晓并同意<text class="detTxt" @tap.stop="goXlzxXy">《心理咨询协议》</text>和<text class="detTxt" @tap.stop="goXlzxBook">《心理咨询知情书》</text></view> 
		</view>
		<view class="botBtnGroup">
			<button class="comBtn" @tap="goSubmit" :disabled="isDisableFlag">立即预约</button>
		</view>
	</view>
</template>

<script>
	import ModTit from './components/ModTit.vue';
	import ZxType from './components/ZxType.vue'
	import ZxTime from './components/ZxTime.vue'
	export default {
		components:{
			ModTit,
			ZxType,
			ZxTime
		},
		data(){
			return{
				isHasDataFlag:false,
				currIndex:0,
				zxrList:[
					{zxrName:'黄利峰',zxrMobile:'18790958171'},
					{zxrName:'黄利峰1',zxrMobile:'18790958172'},
				],
				offLineFlag:false,
				zxTypeArr:[
					{id:3,name:'面对面',iconName:'mdm.png'},
					{id:1,name:'视频咨询',iconName:'shipin.png'},
					{id:2,name:'语音咨询',iconName:'yuyin.png'}
				],
				typeIndex:0,
				perInfoArr:[{name:'婚姻家庭',selFlag:true},{name:'恋爱情感',selFlag:false},{name:'亲子教育',selFlag:false},
							{name:'身心健康',selFlag:true},{name:'性心理',selFlag:false},{name:'职场',selFlag:false},
							{name:'人际关系',selFlag:false},{name:'个人成长',selFlag:false},{name:'少儿成长',selFlag:false},
							{name:'特殊情况',selFlag:false},{name:'其他',selFlag:false}
				],
				perInfoArrVal:[],
				currDateIndex:0,
				currWeek:'',
				dateList:[
					{weekChi:'星期六',workDate:"2024-02-17",yyTag:1},
					{weekChi:'星期日',workDate:"2024-02-18",yyTag:1},
					{weekChi:'星期一',workDate:"2024-02-19",yyTag:1},
					{weekChi:'星期二',workDate:"2024-02-20",yyTag:1},
					{weekChi:'星期三',workDate:"2024-02-21",yyTag:1},
					{weekChi:'星期四',workDate:"2024-02-22",yyTag:1},
					{weekChi:'星期五',workDate:"2024-02-23",yyTag:1}
				],
				isAgreeFlag:false,
			}
		},
		onLoad(){
			this.currWeek = this.util.dateToWeek( this.util.getNowTimeDay() );

		},
		methods:{
			goAddZxr(){
				
			},
			selectYyType(index,id){
				this.typeIndex = index;
				this.zxType = id;
				if(this.zxType == '3' && this.uoList.length > 0){
					this.offLineFlag = true;
				}else{
					this.offLineFlag = false;
				}
			},
			selectCurrPos(index,name){
				this.util.commonMultiSelect(this.perInfoArr,this.perInfoArrVal,index,name)
			},
			goXlzxBook(){
				uni.navigateTo({
					url:'../../protocol/protocol?xyId=13'
				})
			},
			goXlzxXy(){
				uni.navigateTo({
					url:'../../protocol/protocol?xyId=12'
				})
			},
			shouldAgree(){
				this.isAgreeFlag = !this.isAgreeFlag;
			},
		}
	}
</script>

<style lang="scss">
	.addZxr{
		font-size: 26rpx;
		height: 100%;
		color:$sq-main8;
		font-weight: normal;
		.icon-jia{
			font-size: 22rpx;
			margin-right: 5rpx;
		}
	}
	.zxUserInfo{
		flex-wrap: nowrap;
		overflow: hidden;
		overflow-x:auto;
		margin-bottom: 10rpx;
		.noZxr{
			width: 100%;
			text-align: center;
			font-size: 26rpx;
			color: $sq-maina;
			padding: 30rpx 0;
		}
		.zxrList{
 			width: 200rpx;
			padding: 15rpx 20rpx;
			border: 1rpx solid #E3E3EB;
			background:  $sq-fuf;
			font-size: 28rpx;
			margin-right: 20rpx;
			border-radius: 10rpx;
			flex-shrink: 0;
			.zxsName{
				color: $sq-main0;
				align-items: center;
				font-size: 28rpx;
			}
			.sex{
				font-size: 24rpx;
				margin-top: 10rpx;
				color: $sq-main8;
			}
			&.active{
				border: 1rpx solid #D9D5F7;
				background: $sq-fue;
			} 
		}
	}
	.hasBg{
		background: #fff;
		padding: 15rpx;
		border-radius: 10rpx;
		margin-bottom: 10rpx;
	}
	.ogzInfo{
		background: #fff;
		margin:20rpx 0 10rpx 0;
		.ogzItem{
			border-radius: 10rpx;
			box-shadow: 0 0 10rpx rgba(0,0,0,.1);
			padding: 20rpx 30rpx 30rpx;
			.ogzName{
				height: 60rpx;
				align-items: center;
				font-size: 30rpx;
				font-weight: bold;
				color: $sq-main0;
				.goNavigation{
					height: 100%;
					line-height: 60rpx;
					font-size: 26rpx;
					color: $pss-sq-main-bg;
					padding-left: 60rpx;
					.icon-daohang{
						font-size: 24rpx;
					}
				}
			}
			.ogzAdd,
			.ogzTel{
				font-size: 28rpx; 
				color: $sq-main8;
				.icon-weizhi,
				.icon-dianhua1{
					margin-right: 10rpx;
					font-size: 28rpx; 
				}
			}
			.ogzAdd{
				margin-bottom: 10rpx;
			}
		}
	}
	.qkList{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.qkItem{
			width: 32%;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			height: 65rpx;
			font-size: 28rpx;
			color: $sq-main0;
			.multiView{
				width: 26rpx;
				height: 26rpx;
				line-height: 26rpx;
				border: 1rpx solid #E1E0EB;
				border-radius: 6rpx;
				color: #fff;
				text-align: center;
				margin-right: 15rpx;
				.icon-duihao{
					font-size:24rpx;
				}
			}
			&.active{
				.multiView{
					border: 1rpx solid #d9d5f7;
					background: #eeeeff;	
				}
				.icon-duihao{
					color: $pss-sq-main-bg;
				}
			}
		}
		&:after{
			content:'';
			width: 32%;
			height: 65rpx;
		}
	}
	.agree{
		align-items: center;
		background: #fff;
		border-radius:20rpx;
		padding: 30rpx 0;
		margin-bottom: 20rpx;
		.check{
			width: 24rpx;
			height: 24rpx;
			line-height: 24rpx;
			border:1rpx solid #eee;
			border-radius: 6rpx;
			margin: 0 10rpx 0 20rpx;
			text-align: center;
			.icon-duihao{
				font-size: 22rpx;
				color: #fff;
				opacity: 0;
			}
			&.active{
				border:1rpx solid $pss-sq-main-bg;
				background: $pss-sq-main-bg;
				.icon-duihao{
					color: #fff;
					opacity: 1;
				}
			}
		}
		.agreeTxt{
			font-size: 24rpx;
			color: $sq-maina;
			.detTxt{
				color: $sq-main0;
			}
		}
	}
	.botBtnGroup{
		width: 100%;
		height: 120rpx;
		position: sticky;
		left: 0;
		bottom: 0;
		background: #fff;
		box-shadow: 0 -10rpx 10rpx rgba(127, 188, 255, .1);
		display: flex;
		align-items: center;
		--sonHei:80rpx;
		.comBtn{
			flex: 1;
			height: var(--sonHei);
			border-radius: 50rpx;
			line-height: var(--sonHei);
			font-size: 30rpx;
			margin: 0 30rpx;
			background: $pss-sq-main;
		}
	}
	page{
		background: $sq-fuf;
	}
</style>